// 主要处理新建和编辑的场景
import React, { useEffect, useRef, useState } from 'react';
import { ProFormText, StepsForm, ProFormCascader } from '@ant-design/pro-form';
import RegisterProgress from '../RigisterpRrogress';
import { Button } from 'antd';
import { optionsType } from '@/consts/deviceOptions';
import { randomUpperLetter } from '@/util/random';

/**
 * 设备注册组件
 */
const DeviceRegister = ({ deviceInfo, changeStatus }) => {
  const formMapRef = useRef([]);
  const [flag, setFlag] = useState(false);
  const formRef = useRef();
  const formValue = {
    deviceInfo: {
      ...deviceInfo,
      // todo : 新增授权码 ( 随机生成 )
      authorizationCode: randomUpperLetter(14),
    },
  };
  useEffect(() => {
    formMapRef.current.forEach((formInstanceRef) => {
      formInstanceRef.current?.setFieldsValue(formValue);
    });
  }, []);
  return (
    <StepsForm
      formMapRef={formMapRef}
      formRef={formRef}
      onFinish={(values) => {
        console.log(values);
        return Promise.resolve(true);
      }}
      formProps={{
        validateMessages: {
          required: '此项为必填项',
        },
      }}
      submitter={{
        render: (props) => {
          if (props.step === 0) {
            return (
              <Button
                type="primary"
                onClick={() => {
                  console.log(formRef.current?.validateFields());
                  formRef.current?.validateFields().then(() => {
                    setFlag(true);
                    props.onSubmit?.();
                  });
                }}
              >
                开始注册
              </Button>
            );
          }
        },
      }}
    >
      <StepsForm.StepForm name="第一步" title="填入设备注册参数">
        <ProFormText label="ip地址" name={['deviceInfo', 'ip']} rules={[{ required: true }]} />
        <ProFormCascader
          label="设备厂家/设备类别/产品线"
          name={['deviceInfo', 'factory']}
          rules={[
            {
              required: true,
              message: '请选择厂家/产品！',
            },
          ]}
          fieldProps={{
            options: optionsType,
            expandTrigger: 'hover',
          }}
        />
        <ProFormText
          label="医院名称"
          name={['deviceInfo', 'hospitalName']}
          rules={[{ required: true }]}
        />
        {/* 联系人 */}
        <ProFormText label="联系人" name={['deviceInfo', 'concat']} rules={[{ required: true }]} />
        {/* 联系电话 */}
        <ProFormText
          label="联系电话"
          name={['deviceInfo', 'phoneNumber']}
          rules={[{ required: true }]}
        />
        {/* 设备id */}
        <ProFormText label="设备id" name={['deviceInfo', 'did']} rules={[{ required: true }]} />
        {/* 授权码*/}
        <ProFormText
          label="授权码"
          name={['deviceInfo', 'authorizationCode']}
          rules={[{ required: true }]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm name="step2" title="等待设备注册结果" style={{ textAlign: 'center' }}>
        {flag && <RegisterProgress deviceInfo={deviceInfo} changeStatus={changeStatus} />}
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default DeviceRegister;
